<template>
	<view>
		<u-navbar title="任务" :is-back="false" :background="background" back-icon-color="#333333" back-icon-size="40"
			title-color="#333333" title-size="36" :title-bold="true">
		</u-navbar>
		<view class="page">
			<view class="top">
				<view class="title">
					HI～想要悠悠帮您做什么？
				</view>
				<view class="tips">
					在这可以创建提醒哦～
				</view>
			</view>
			<view class="time">16:03</view>
			<view class="message items-center flex-row" :class="item.type == 'user' ? 'justify-end' : 'justify-start'"
				v-for="(item,index) in message" :key="index">
				<view class="" :class="item.type == 'assist' ? 'mess-white' : 'mess-blue'">
					{{item.content}}
				</view>
			</view>
			<button @tap="startRecord">开始录音</button>
			<button @tap="endRecord">停止录音</button>
			<button @tap="playVoice">播放录音</button>
			<view class="bottom flex-col items-center">
				<image class="image_1" src="/static/add_task_create.png" mode=""></image>
				<image class="image_2" src="/static/add_task_voice.png" mode=""></image>
			</view>
		</view>

	</view>
</template>

<script>
	// import { uploadMp3 } from "@/api/request.js" 
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();

	innerAudioContext.autoplay = true;


	// var sotk = null;
	// var socketOpen = false;
	// var token = uni.getStorageSync("token")
	// // var wsbasePath = "ws://39.105.123.96:39100";
	// var wsbasePath = "ws://youyou.chinfut.com:8081/zyu-mapi/app-websocket/"+token;
	export default {
		data() {
			return {
				voicePath: '',


				background: {
					backgroundColor: 'rgba(0,0,0,0)',
				},
				message: [{
						type: 'user',
						content: '帮我设置任务提醒 晚上7点半 上英语网课'
					},
					{
						type: 'assist',
						content: '好的，已经为您设置了提醒。请确保您的设备已开启通知功能，以便在晚上7点半时接收提醒。祝您英语网课学习愉快!'
					}
				]
			}
		},
		onLoad() {
			let self = this;
			recorderManager.onStop(function(res) {
				console.log('recorder stop' + JSON.stringify(res));
				self.voicePath = res.tempFilePath;
				self.$uploadAudio(res.tempFilePath).then(res => {
					console.log(res, 'uploadImg')
					// this.cardimg = res.data.img
					// self.audioName = res.name
					
								
				})
			});
			recorderManager.onFrameRecorded(function(res) {
				console.log('recorder onFrameRecorded' + JSON.stringify(res));
			});


			// this.webSocketStart();
			// const textEncoder = new TextEncoder();
			// const jsonString = JSON.stringify({
			//   familyMemberId: this.familyMemberId,
			//   fileType: "audio"
			// });
			// const paramData = textEncoder.encode(jsonString);
			// const reader = new FileReader();
			// reader.onload = (e) => {
			//   const byteArray = new Uint8Array(e.target.result);
			//   const newByteArray = new Uint8Array(2 + paramData.length + byteArray.length);

			//   newByteArray.set([Math.floor(paramData.length / 127)], 0);
			//   newByteArray.set([paramData.length % 127], 1);
			//   newByteArray.set(paramData, 2);
			//   newByteArray.set(byteArray, paramData.length + 2);

			//   // 创建一个新的Blob对象，包含添加了头部的二进制数据
			//   const newBlob = new Blob([newByteArray], { type: 'application/octet-stream' });

			//   uni.sendSocketMessage({
			//     data: newBlob,
			//     success: function(res) {
			//       console.log('WebSocket message sent successfully');
			//     },
			//     fail: function(err) {
			//       console.error('Failed to send WebSocket message', err);
			//     }
			//   });
			// };

			// reader.readAsArrayBuffer(fileOfBlob);
		},
		methods: {
			startRecord() {
				console.log('开始录音');

				recorderManager.start();
			},
			endRecord() {
				console.log('录音结束');
				recorderManager.stop();
			},
			playVoice() {
				console.log('播放录音');

				if (this.voicePath) {
					innerAudioContext.src = this.voicePath;
					innerAudioContext.play();
				}
			},
			// //重新连接---------------------------------------------------------------
			// webSocketReStart: function(e) {
			// 	var _this = this;

			// 	sotk = uni.connectSocket({
			// 		url: wsbasePath,
			// 		header: {
			// 			'content-type': 'application/json'
			// 		},
			// 		method: "POST",
			// 		success: res => {
			// 			console.log('小程序连接成功：', res);
			// 		},
			// 		fail: err => {
			// 			console.log('出现错误啦！！' + err);
			// 			uni.showToast({
			// 				title: '网络异常！'
			// 			});
			// 		}
			// 	});
			// 	this.webSokcketReMethods();
			// },
			// //重新
			// webSokcketReMethods: function(e) {
			// 	let that = this;
			// 	sotk.onOpen(res => {
			// 		socketOpen = true;
			// 		console.log('监听 WebSocket 连接打开事件11。', res);

			// 		// that.sendSocketMessage({
			// 		// 	device_num: that.device.device_num,
			// 		// 	msg: 'aa552021081900201\r\n'
			// 		// });
			// 		that.sendSocketMessage({
			// 			fileType:"audio",
			// 			familyMemberId: '',
			// 		});
			// 	});
			// 	sotk.onClose(onClose => {
			// 		console.log('监听 WebSocket 连接关闭事件。', onClose);
			// 		socketOpen = false;
			// 		// if (onClose.code === 1006) {
			// 		//       console.error('连接已关闭，无法建立连接1');
			// 		//       // 尝试重新连接
			// 		//       setTimeout(that.webSocketReStart, 5000);
			// 		//     } else {
			// 		//       console.log('onClose.code', code, '原因1：', reason);
			// 		//     }
			// 	});
			// 	sotk.onError(onError => {
			// 		console.log('监听 WebSocket 错误。错误信息', onError);
			// 		socketOpen = false;
			// 	});
			// 	sotk.onMessage(onMessage => {
			// 		console.log(onMessage.data,'jsjsjsjsjsjsj');
			// 		var data1 = JSON.parse(onMessage.data);
			// 		if(data1.code == 1){
			// 			let data = {
			// 				total_price: this.price,
			// 				user_id: this.user_id,
			// 				device_id: this.device.device_id,
			// 				address: this.device.address
			// 			};
			// 			this.add_order(data)
			// 		}else {
			// 			uni.showToast({
			// 				title: data1.msg,
			// 				icon: 'error'
			// 			})
			// 		}
			// 		that.closeWebsocket(onMessage.data); //var data = JSON.parse(onMessage.data);
			// 		//console.log('监听WebSocket接受到服务器的消息事件。服务器返回的消息',data);
			// 	});
			// },
			// //开始webSocket---------------------------------------------------------------
			// webSocketStart: function(e) {
			// 	console.log('走了么')
			// 	var _this = this;

			// 	sotk = uni.connectSocket({
			// 		url: wsbasePath,
			// 		header: {
			// 			'content-type': 'application/x-www-form-urlencoded',
			// 			// 'fileType': "audio",
			// 			// 'familyMemberId': '' 

			// 		},
			// 		method: "POST",
			// 		success: res => {
			// 			console.log('小程序连接成功：', res);
			// 		},
			// 		fail: err => {
			// 			console.log('出现错误啦！！' + err);
			// 			uni.showToast({
			// 				title: '网络异常！'
			// 			});
			// 		}
			// 	});
			// 	this.webSokcketMethods();
			// },
			// //监听指令
			// webSokcketMethods: function(e) {
			// 	let that = this;
			// 	sotk.onOpen(res => {
			// 		socketOpen = true;
			// 		console.log('监听 WebSocket 连接打开事件。', res);
			// 		console.log(that.device.device_num,'this.device.device_num')
			// 		// that.sendSocketMessage({
			// 		// 	device_num: that.device.device_num,
			// 		// 	msg: 'aa552021081900201\r\n'
			// 		// });
			// 		// that.sendSocketMessage({
			// 		// 	id: that.device.device_num,
			// 		// 	command: 'aa552021081900201\r\n'
			// 		// });
			// 	});
			// 	sotk.onClose(onClose => {
			// 		console.log('监听 WebSocket 连接关闭事件。1', onClose);
			// 		socketOpen = false;
			// 		// if (onClose.code === 1006) {
			// 		//       console.error('连接已关闭，无法建立连接');
			// 		//       // 尝试重新连接
			// 		//       setTimeout(that.webSocketReStart, 5000);
			// 		//     } else {
			// 		//       console.log('onClose.code', code, '原因：', reason);
			// 		//     }
			// 	});
			// 	sotk.onError(onError => {
			// 		console.log('监听 WebSocket 错误。错误信息', onError);
			// 		socketOpen = false;
			// 	});
			// 	sotk.onMessage(onMessage => {
			// 		console.log(onMessage.data,'ffdddgdfgdfhdfh');
			// 		var data1 = JSON.parse(onMessage.data);
			// 		console.log(data1.code,'bbbbbb')
			// 		if(data1.code == 1){
			// 			console.log('走了么1')
			// 			// let data = {
			// 			// 	total_price: this.price,
			// 			// 	user_id: this.user_id,
			// 			// 	device_id: this.device.device_id,
			// 			// 	address: this.device.address
			// 			// };
			// 			// console.log(data,'datatatatatat223444')
			// 			// this.add_order(data)
			// 		}else {
			// 			wx.showToast({
			// 				title: data1.msg,
			// 				icon: 'error'
			// 			})
			// 		}
			// 		that.closeWebsocket(onMessage.data); //var data = JSON.parse(onMessage.data);
			// 		//console.log('监听WebSocket接受到服务器的消息事件。服务器返回的消息',data);
			// 	});
			// },
			// //发送消息
			// sendSocketMessage: function(msg) {
			// 	console.log(11);
			// 	let that = this;

			// 	if (socketOpen) {
			// 		console.log('通过 WebSocket 连接发送数据', JSON.stringify(msg));
			// 		sotk.send({
			// 			data: JSON.stringify(msg)
			// 		}, function(res) {
			// 			console.log('已发送', res);
			// 		});
			// 	}
			// },
			// //关闭连接
			// closeWebsocket: function(str) {
			// 	if (socketOpen) {
			// 		sotk.close({
			// 			code: "1000",
			// 			reason: str,
			// 			success: function() {
			// 				console.log("成功关闭websocket连接");
			// 			}
			// 		});
			// 	}
			// },
		}
	}
</script>

<style>
	@import url('../../common/css/common.css');

	page {
		background-color: #f5f8ff;
		width: 100%;
		background-image: url("../../static/zhushou_top_bg.png");
		background-size: 100% 586rpx;
		background-repeat: no-repeat;
	}

	.top {
		width: 737rpx;
		height: 380rpx;
		background-image: url("../../static/add_task_welcome.png");
		background-size: 100% 100%;
		padding-left: 75rpx;
		padding-right: 75rpx;
		background-repeat: no-repeat;
	}

	.title {
		padding-top: 217rpx;
		padding-bottom: 20rpx;
		font-weight: 500;
		font-size: 42rpx;
		color: #1C335C;
	}

	.tips {
		font-weight: 400;
		opacity: 0.7;
		font-size: 26rpx;
		color: #616274;
		opacity: 0.7;
	}

	.time {
		font-weight: 500;
		font-size: 22rpx;
		color: #B8BACC;
		text-align: center;
		margin-top: 63rpx;
		margin-bottom: 33rpx;
	}

	.message {
		width: 691rpx;
		margin: 0 auto;
		margin-bottom: 27rpx;
	}

	.mess-white {
		/* width: 691rpx; */
		/* height: 173rpx; */
		max-width: 691rpx;
		border-radius: 32rpx 32rpx 32rpx 4rpx;
		background: #ffffff;
		font-weight: 400;
		font-size: 30rpx;
		color: #171832;
		padding: 28rpx 30rpx;
	}

	.mess-blue {
		/* width: 604rpx; */
		/* height: 86rpx; */
		max-width: 691rpx;
		border-radius: 32rpx 32rpx 4rpx 32rpx;
		background: linear-gradient(90deg, #5948ff, #3a82ff);
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		padding: 28rpx 30rpx;
	}

	.bottom {
		/* width: 100%; */
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	.image_1 {
		width: 280rpx;
		height: 78rpx;
	}

	.image_2 {
		width: 498rpx;
		height: 469rpx;
	}
</style>